		
		<style >
			@import '../../../static/z39pc/css/mycss/market.css';
			
			@import '../../../static/z39pc/fonts/iconfont.css';
			@import '../../../static/z39pc/css/masonry.css';
			@import '../../../static/z39pc/css/swiper-3.4.2.min.css';
		</style>

	<template>
		<div class="market-main-container">
			
		
		<div id="nTalk_post_hiddenElement" style="left: -10px; top: -10px; visibility: hidden; display: none; width: 1px; height: 1px;"></div>

		<header-nav></header-nav>
		<div class="slider">
			<div class="swiper-container" id="slider">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in sliderList">
							<span class="mar-r-10 task-title">{{item.title}}:</span>
							<i v-for="tag in item.tags" class="task-tag"> 
			        		{{tag}}
			        	</i>
						</div>
						<!--<div class="swiper-slide">Slide 2</div>
			        <div class="swiper-slide">Slide 3</div>-->
					</div>

					<!-- 如果需要滚动条 -->
					<!--<div class="swiper-scrollbar"></div>-->
			</div>
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>

		<div id="mainContent" style="background: none;">
			<masonry></masonry>
		</div>
		</div>
		</template>
		<script>
			import headerNav from '../../components/all/header.vue'
			import '../../../static/z39pc/js/jquery-2.1.0.js'
			import swiper from 'swiper';
			import masonry from '../../components/market/masonry.vue';
			
			var initSlider = function() {
				$('body').css({
					'height':'auto',
					'overflow-y':'scroll',
					'font-size':'62.5%'
				})
				var appendNumber = 4;
				var prependNumber = 1;
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					slidesPerView: 6,
					keyboardControl: true,
					mousewheelControl: true,
					grapCursor: true,
					//			        centeredSlides: true,
					paginationClickable: true,
					spaceBetween: 10,
				});
			}
			var initPage=function(){
				$('body').on('click','.swiper-container .task-tag',function(){
					$(this).toggleClass('active')
				})
			}
			export default{
				components:{
		    		'masonry':masonry,
		    		'header-nav':headerNav
				},
				data(){
					return{
						sliderList: []
					}
				},
				methods:{
					creatDate: function() {
						var tags = []
						for(var i = 1; i < 10; i++) {
							if(i<8){
								tags.push('标签'+i*2)
							}
							
							this.sliderList.push({
								title: '项目' + i,
								tags: tags
							})
						}
						this.$nextTick(function(){
							initSlider()	
							
						})
						
					}
				},
				mounted() {
					initPage()
					this.creatDate();
				}
			}
			
			
		</script>
